﻿<!DOCTYPE html>
<html>
<head>
<title>丸子妈妈</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<script src="res/jquery.js"></script>
<script src="fun.js"></script>
<link href="style.css" rel="stylesheet" />
<link href="animate.css" rel="stylesheet" />
</head>
<body>


<script>
$(function(){
	delay_1 = .4;
	self_delay_3 = .2;
	
	var arr = [ .5,.5,.3,.6,.4,.3 ];
	var pin = [ "zhou ri","dai","hai zi","qu","hai yang","gong yuan" ];
	var word = [ "周日","带","孩子","去","海洋","公园" ];
	var str="";
	for(var i=0;i<word.length;i++){
		str = str+"<u><i>"+pin[i]+"</i></u>"+"<em>"+ word[i] +"</em>";
	};
		
	$(".remind_new b").append(str);
	var arrchange = new Array();
	for(var i=0;i<arr.length;i++){
		if(i==0){
			arrchange[0] = arr[0];
		}
		else{
			arrchange[i]=arr[i]+arrchange[i-1];
		};
		$(".remind_new i").eq(i).css({
			"animation-delay":delay_1+(arrchange[i]-arr[i]/2)+"s"
		});
		$(".remind_new u").eq(i).css({
			"animation-delay":delay_1+arrchange[i]+"s"
		});
		$(".remind_new dd em").eq(i).css({
			"animation-delay":delay_1+arrchange[i]+"s"
		});
	}
	over_1 = delay_1 + .3
	delay_2 = over_1 + arrchange[arrchange.length - 1] 
	delay_3 = delay_2 + self_delay_3;
	
	j=0;
	
	aaa=280;
	bbb=150;
	
	ccc=1000/aaa;
	print = setInterval(function(){
		if(j>(over_1-.4)*ccc){
			num = Math.floor(Math.random()*8)+1;
			$(".kword dl").eq(num).addClass("click");
			setTimeout(function(){
				$(".kword dl").eq(num).removeClass("click");
			},bbb)
		}
		if(j>(delay_2-.6)*ccc){
			clearInterval(print)
		}
		j++
	},aaa)
	
	
	setTimeout(function(){
		$(".out_box").addClass("keyboard_show");
	},delay_1*1000);
	
	setTimeout(function(){
		$(".out_box").removeClass("keyboard_show");
	},delay_3*1000);
	
	page_total = delay_3+0.2;
	
	setTimeout(function(){ window.parent.nextAnimation('page3.html'); },page_total*1000);	
})
</script>

<style>
	.remind_new dd i{animation-name: show;}
	.remind_new dd u{animation-name: hide;}
	.remind_new dd em{animation-name: show;}
	.remind_new dd em{width: 0; height: 0; overflow: hidden; font-size: 14px; display: inline-block; animation-name: show;}
	.remind_new dd i{width: 0; height: 0; overflow: hidden; font-size: 14px; display: inline-block; background-color: #c6daea;}
	.remind_new dd u{overflow: hidden; display: inline-block;}
	.remind_new dd b{font-weight: normal;}
	.remind_new dd *{vertical-align: middle; position: relative; top:-2px;}
</style>

<div class="out">
	<div class="phone_top"><dl class="time_point_0"></dl></div>
	<div class="lock_panel"></div>
	<div class="remind">
		<div class="remind_title">提醒</div>
		<div class="remind_number">6</div>
		<div class="remind_edit">编辑</div>
		<div class="remind_list">
			<dl><dt><s></s></dt><dd>晚十点需提交方案</dd></dl>
			<dl><dt><s></s></dt><dd>上午10点，带薇薇试听英语培训</dd></dl>
			<dl><dt><s></s></dt><dd>下午四点美术课</dd></dl>
			<dl><dt><s></s></dt><dd>晚上8点营养师培训</dd></dl>
			<dl><dt><s></s></dt><dd>婆婆下个月生日宴会，记得订酒店</dd></dl>
			<dl><dt><s></s></dt><dd>闺蜜二胎满月酒</dd></dl>
			<dl class="remind_new"><dt><em></em></dt><dd><b></b><s></s></dd></dl>
			<dl><dd></dd></dl>
			<dl><dd></dd></dl>
			<dl><dd></dd></dl>
			<dl><dd></dd></dl>
			<dl><dd></dd></dl>
		</div>
	</div>
	<div class="out_box">
		<div class="talk_bottom_box">

		</div>
	</div>
</div>

</body>
</html>